<template>
  <div>
    <input type="text" name="" id="" v-model="names">

    <div>
        内容：{{ names }}
    </div>

    <input type="text" name="" id="" v-model="age">

    <div>
        内容：{{ age }}
    </div>
  </div>
</template>

<script>
import { ref, watch, reactive, toRefs } from 'vue';
export default {
    setup() {
        let name = ref('');
        let newNames = reactive({names: ''})
        let newObj = reactive({age: ''})

        // watch(name, (newValue, oldValue) => {
        //     console.log(newValue, oldValue)
        // })

        watch([() => newNames.names, () => newObj.age], ([newName, newAge],[oldName, oldAge]) => {
            console.log('new', newName, newAge)
            console.log('old', oldName, oldAge)
        })

        const {names} = toRefs(newNames);
        const {age} = toRefs(newObj);
        return {
            name,
            newNames,
            names,
            age
        }
    }
}
</script>

<style>

</style>